<script>
import { mapState } from 'vuex'
import IconMenu from './comp/IconMenu'
import List from './comp/List'
import Item from './comp/Item'
import getPixel from '@/util/getPixel'
export default {
  data () {
    return {
      curStyle: {},
      curPlaylist: {}
    }
  },
  components: {
    IconMenu,
    List,
    Item
  },
  async mounted() {
    const res = await this.getPlaylist()
    this.curPlaylist = res.data.playlist
    getPixel(this.curPlaylist.coverImgUrl, rgba => {
      this.curStyle = {
        background: rgba
      }
    })
  },
  methods: {
    getPlaylist() {
      let pid = this.$route.params.pid
      return this.$axios('/api/playlist/detail?id='+pid)
    }
  }
}
</script>
<template lang="pug">
.page-playlist.c_f(:style="curStyle")
  .page-head.flex-center-between
    .page-head__left.flex-center-between
      .iconfont.icon-back(@click="$back()")
      .page-head__txt
        p 歌单
        span 编辑推荐：快选一句送给你最爱的Ta吧
    .page-head__right.flex-center-between
      .iconfont.icon-search
      IconMenu
  .page-playlist__wrapper
    .page-playlist__info
      .flex
        .page-playlist__pic
          img(:src="curPlaylist.coverImgUrl")
          .page-playlist__pic-txt
            .iconfont.icon-erji
            span 53万
        .page-playlist__name
          h3 {{curPlaylist.name}}
      .page-playlist__action
        .page-playlist__action-item
          .iconfont.icon-comment
          p {{curPlaylist.commentCount}}
        .page-playlist__action-item
          .iconfont.icon-share
          p {{curPlaylist.shareCount}}
        .page-playlist__action-item
          .iconfont.icon-download
          p 下载
        .page-playlist__action-item
          .iconfont.icon-checkbox
          p 多选
    List(:total="curPlaylist.trackCount" :collections="curPlaylist.subscribedCount")
      Item(v-for="item, index in curPlaylist.tracks" :idx="index+1" :itemdata="item")
</template>
<style lang="stylus" scoped>
.page-playlist
  height 100vh
  padding-top 44px
  padding-bottom 55px
  box-sizing border-box
.page-head
  position fixed
  top 0
  width 100%
  padding-right 20px
  height 44px
  box-sizing border-box
  .icon-back
    margin-right 10px
    font-size 30px
  .page-head__txt
    p
      font-size 18px
    span
      font-size 12px
  .page-head__right
    .iconfont
      margin-right 30px
      font-size 24px
.page-playlist__wrapper
  height 100%
  overflow auto
.page-playlist__info
  padding 30px 20px 0
  .page-playlist__pic
    position relative
    width 135px
    img
      width 135px
      height 135px
      box-shadow 0 0 5px #ccc
      border-radius 5px
    .page-playlist__pic-txt
      position absolute
      top 5px
      right 5px
      font-size 12px
      .iconfont
        display inline-block
  .page-playlist__name
    padding-left 15px
    padding-top 10px
  .page-playlist__action
    display flex
    text-align center
    .page-playlist__action-item
      flex 1
      .iconfont
        font-size 18px
</style>
